<template>
  <el-row>
    <el-col :span="17" :offset="1">
      <h2>{{ currentNews.title }}</h2>
      <div class="time">
        {{ dayjs(currentNews.editTime).format("YYYY年MM月DD日 HH:mm") }}
      </div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>

      <div v-html="currentNews.content" class="htmlcontent"></div>
    </el-col>
    <el-col :span="4" :offset="1" :pull="1">
      <el-card style="width: 220px">
        <template #header>
          <div class="card-header">
            <span style="font-size: 15px; font-weight: bold">最近新闻</span>
          </div>
        </template>
        <div
          v-for="item in topNews"
          :key="item.id"
          style="padding: 14px"
          @click="handleChange(item.id)"
        >
          <span>{{ item.title }}</span>
          <div class="bottom">
            <time class="time">{{
              dayjs(item.editTime).format("YYYY年MM月DD日 HH:mm")
            }}</time>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup name="">
import { onMounted, ref, watchEffect } from "vue";
import axiosInstance from "@/api/axios";
import { useRoute, useRouter } from "vue-router";
import { dayjs } from "element-plus";
import "dayjs/locale/zh-cn";
import { StarFilled } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const currentNews = ref({});
const topNews = ref([]);

watchEffect(async () => {
  const res1 = await axiosInstance.get(`/webapi/news/list/${route.params.id}`);
  const res2 = await axiosInstance.get(`/webapi/news/toplist?limit=4`);
  currentNews.value = res1.data.result;
  topNews.value = res2.data.result;
});

const handleChange = (id) => {
  router.push(`/news/${id}`);
};
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 89px;
}
.time {
  font-size: 13px;
  color: gray;
}
::v-deep .htmlcontent {
  img {
    max-width: 100%;
  }
}
</style>
